<template>
  <div class="page has-navbar" v-nav="{ title: '个人中心' ,showBackButton: true, onBackButtonClick: back }">
    <div class="page-content text-center">

      <main id="myInfo">
        <div class="head">
          <img class="header" :src="userInfo.headImg" width="66px" height="66px">
          <span class="name">{{userInfo.name}}</span>
          <span class="balance">账户余额: {{balance}} 金币</span>
          <md-button :class="{'disbale-btn':isDaysSign}" class="md-button button button-assertive button-block signinBtn" @click.native="sign">签到</md-button>
          <md-button v-show="userInfo.role==='audience'" :class="{'disbale-btn':userInfo.status===3}" class="md-button button button-assertive button-block live" @click.native="toLive">成为主播</md-button>
        </div>
        <div class="bodyer">
          <!-- start 最近观看 -->
          <div class="list">
            <p class="love">最近观看</p>
            <div class="recent-watch-list video-list">
              <p class="back-tip" v-if="!recentWatchList.length">无最近观看</p>
              <div v-for="(item,index) in recentWatchList" :key="index">
                <video-card :video-info="item"></video-card>
              </div>
            </div>
          </div>
          <!-- end 最近观看 -->
          <!-- start 我的收藏 -->
          <div class="list">
            <p class="love">我的收藏</p>
            <div class="love-video-list video-list">
              <p class="back-tip" v-if="!loveVideoList.length">暂无收藏</p>
              <div v-for="(item,index) in loveVideoList" :key="index">
                <video-card :video-info="item"></video-card>
              </div>
            </div>
          </div>
          <!-- end 我的收藏 -->
        </div>
      </main>

    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import 'assets/css/MyInfo.scss';
import videoCard from 'components/video/videoCard.vue';

export default {
    name: 'myInfo',
    components: {
        videoCard
    },
    data() {
        return {
            isDaysSign: true, //是否签到
            balance: 0, //账户余额
            loveVideoList: [], //关注的直播间
            recentWatchList: [] //最近观看的直播
        };
    },
    mounted() {
        //获取签到状态
        this.querySignStatus();
        //获取账户余额
        this.queryBalance();
        this.queryRecentVideo();
    },
    computed: {
        ...mapGetters(['userInfo', 'videoInfo'])
    },
    methods: {
        back() {
            $router.back('/');
        },
        //   签到
        sign() {
            let that = this;
            if (this.isDaysSign) {
                return;
            } else {
                this.$ajax
                    .post('/user/sign', {
                        id: that.userInfo.id
                    })
                    .then(res => {
                        if (res.code === 1) {
                            $toast.show('签到成功');
                            this.isDaysSign = true;
                            //获取账户余额
                            this.queryBalance();
                        }
                    });
            }
        },
        //   获取签到状态
        querySignStatus() {
            let that = this;
            this.$ajax
                .get('/user/signStatus', {
                    params: {
                        id: that.userInfo.id
                    }
                })
                .then(res => {
                    if (res) {
                        that.isDaysSign = res.code !== 1;
                    }
                });
        },
        //   获取账户余额
        queryBalance() {
            let that = this;
            this.$ajax
                .get('/user/queryBalance', {
                    params: {
                        id: that.userInfo.id
                    }
                })
                .then(res => {
                    if (res.code === 1) {
                        that.balance = res.data;
                    }
                });
        },
        queryRecentVideo() {
            let that = this;
            this.$ajax
                .get('/video/recent', {
                    params: {
                        userId: that.userInfo.id
                    }
                })
                .then(res => {
                    if (res.code === 1) {
                        that.recentWatchList = res.data ? res.data : [];
                    }
                });
        },
        toLive() {
            this.$ajax
                .post('/user/toBeLiver', {
                    id: this.userInfo.id
                })
                .then(res => {
                    if (res) {
                        this.userInfo.status = 3;
                    }
                });
        }
    }
};
</script>
